<template>
  <div class="search">
    <form action="/" class="form-search">
      <van-search
        v-model="value"
        placeholder="牛肉"
        show-action
        @search="onSearch"
        @cancel="onCancel"
      />
    </form>
    <div class="history" v-if="showWords">
      <div class="title">
        <span>历史记录</span>
      </div>
      <div class="history-item">
        <span v-for="(item,index) in historyWords" :key="`history_item_${index}`" @click="fastSearch(item)">{{item}}</span>
      </div>
    </div>
    <div class="hot-search" v-if="showWords">
      <div class="title">
        <span>热门搜索</span>
      </div>
      <div class="hot-item">
        <span v-for="(item,index) in hotSearchList" :key="`hot_item_${index}`" @click="fastSearch(item.name)">
          <img src="/img/66.png" alt v-if="item.isHot == 1 ? true : false" />
          {{item.name}}
        </span>
      </div>
    </div>
    <div class="list">
      <product-item
        v-for="(item,index) in resultList"
        :key="`resultList${index}`" :productInfo="item"
      ></product-item>
    </div>
  </div>
</template>

<script>
import { Search } from "vant";
import productItem from "@/components/product-item";
Vue.use(Search);
export default {
  data() {
    return {
      showWords: true,
      historyWords: [],
      value: "",
      searchWord: "",
      hotSearchList: [],
      resultList: []
    };
  },
  mounted(){
    this.gethistoryWords()
    this.getSearchhWords()
  },
  watch:{
    value(){
      this.showWords = true
    }
  },
  methods: {
    gethistoryWords(){
      this.historyWords = this.$cookie.getKeywords()
    },
    onSearch() {
      if(this.searchWord == this.value) return false
      this.showWords = false
      this.$store.dispatch('searchGoods', {
        q: this.value
      }).then(res => {
        this.searchWord = this.value
        this.$cookie.addKeywords(this.searchWord)
        console.log('searchGoods', res)
        this.resultList = res.data.result.goods_list
        if(res.data.result.goods_list.length == 0){
          this.$toast('未检索到结果')
        }else{
          this.showWords = false
        }
        this.gethistoryWords()
      }).catch(err => {
        this.gethistoryWords()
      })
    },
    fastSearch(v) {
      this.value = v
      this.onSearch()
    },
    onCancel() {
      this.value = "";
      window.history.length > 1 ? this.$router.go(-1) : this.$router.push("/");
    },
    getSearchhWords(){
      this.$store.dispatch('searchWords', {}).then(res => {
        console.log('searchWords', res)
        var arr = []
        for (let index = 0; index < res.data.result.length; index++) {
          const element = res.data.result[index];
          arr.push({
            name: element.keywords,
            isHot: index == 0 ? true : false
          })
        }
        this.hotSearchList = arr
      }).catch(err => {
        
      })
    }
  },
  components:{
    productItem
  }
};
</script>

<style lang="less">
* {
  padding: 0;
  margin: 0;
}

.search {
  height: 100%;
  width: 100%;
  background: rgba(247, 248, 249, 1);
  .list{
    width: 360px;
    margin: 10px auto;
  }
  .form-search {
    display: flex;
    align-items: center;
    padding: 0 5px 0 15px;
    box-sizing: border-box;
    height: 42px;
    background: #fff;
    border-bottom: 1px solid rgba(234, 234, 234, 1);
    .van-cell {
      width: 297px;
    }
  }
  .history {
    padding: 18px 13px 18px 13px;
    background-color: #fff;
    .title {
      padding-bottom: 12px;
      font-size: 14px;
      font-family: PingFangSC-Medium;
      font-weight: 500;
      color: rgba(48, 48, 48, 1);
    }
    .history-item {
      overflow: hidden;
      span {
        float: left;
        width: auto;
        height: 31px;
        padding: 0px 10px;
        text-align: center;
        line-height: 30px;
        margin: 0px 13px 13px 0;
        border-radius: 15px;
        border: 1px solid rgba(231, 231, 231, 1);
        font-size: 13px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: rgba(48, 48, 48, 1);
      }
    }
  }
  .hot-search {
    padding: 18px 13px 18px 13px;
    background-color: #fff;
    .title {
      padding-bottom: 12px;
      font-size: 14px;
      font-family: PingFangSC-Medium;
      font-weight: 500;
      color: rgba(48, 48, 48, 1);
    }
    .hot-item {
      overflow: hidden;
      span {
        float: left;
        width: auto;
        height: 31px;
        padding: 0px 10px;
        text-align: center;
        line-height: 30px;
        margin: 0px 13px 13px 0;
        border-radius: 15px;
        border: 1px solid rgba(231, 231, 231, 1);
        font-size: 13px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: rgba(48, 48, 48, 1);
        img {
          height: 15px;
          width: 15px;
          padding-right: 3px;
          vertical-align: middle;
        }
      }
    }
  }
}
</style>
